<template>
  <div class="partnerList">
    <div class="partnerList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">商家列表<i class="el-icon-close"></i></div>
    </div>
    <div class="partnerList_bottom">
      <div class="partnerList_bottom_new">
        <div class="partnerList_bottom_new_goods">
          <div class="partnerList_bottom_new_goods_btn">
            <button @click="handerNewShop">
              <i class="el-icon-trophy"></i>新增合作商
            </button>
          </div>
          <div class="partnerList_bottom_new_goods_screening">
            卖场：
            <el-select
              v-model="marketId"
              clearable
              @change="selectMarket"
              filterable
              placeholder="请选择卖场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div class="partnerList_bottom_new_goods_screening_right">
              <el-input v-model="input" placeholder="请输入"></el-input>
              <button @click="handerSeach">
                <i class="el-icon-search"></i>搜索
              </button>
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="padding: 0 20px"
      >
        <el-tab-pane label="家居" name="1"></el-tab-pane>
        <el-tab-pane label="泛家居" name="2"></el-tab-pane>
      </el-tabs>
      <div class="partnerList_table">
        <div class="partnerList_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>店铺名称</th>
              <th>店铺Logo</th>
              <th>店铺详情</th>
              <th>粉丝数量</th>
              <th>店铺标签</th>
              <th>支持配送</th>
              <th>店龄</th>
              <th>联系人</th>
              <th>地址</th>
              <th>手机</th>
              <th>状态</th>
              <th>所属卖场</th>
              <th class="doShop">操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ v.store_id }}</td>
              <td>
                <div class="partnerDetail">{{ v.store_name }}</div>
              </td>
              <td>
                <div class="logoImg">
                  <img v-if="v.store_logo" :src="v.store_logo" alt="" />
                </div>
              </td>
              <td>
                <div class="partnerDetail">{{ v.store_detail }}</div>
              </td>
              <td>{{ v.fans_num }}</td>
              <td style="min-width: 150px">
                <el-select
                  style="margin: 0 10px"
                  v-model="v.cate_lst"
                  multiple
                  filterable
                  allow-create
                  value-key="cate_id"
                  @change="selectTag(v.store_id, v.cate_lst)"
                  default-first-option
                  placeholder="请选择店铺标签"
                >
                  <el-option
                    v-for="item in tagList"
                    :key="item.cate_id"
                    :label="item.cate_name"
                    :value="{
                      cate_name: item.cate_name,
                      cate_id: item.cate_id,
                    }"
                  >
                  </el-option>
                </el-select>
              </td>
              <td>{{ v.is_carry == 0 ? "否" : "是" }}</td>
              <td>{{ v.age }}</td>
              <td>{{ v.link_name }}</td>
              <td>{{ v.address }}</td>
              <td>{{ v.mobile }}</td>
              <td>{{ v.entry_status == 1 ? "启用" : "禁用" }}</td>
              <td>{{ v.market_name }}</td>
              <td class="doShop">
                <button class="editor" @click="SetCoordinate(v)">坐标</button>
                <button
                  class="editor newShop"
                  @click="toNewShop(v.store_id, v.market_id)"
                >
                  新增商品
                </button>
                <button class="editor" @click="toDetail(v.store_id)">
                  详情
                </button>
                <button
                  class="shelves"
                  :class="v.entry_status == 0 ? 'delete' : ''"
                  @click="shelves(v.store_id, v.entry_status)"
                >
                  {{ v.entry_status == 1 ? "禁用" : "启用" }}
                </button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="20">当前数据空空如也</td>
            </tr>
          </table>
        </div>

        <div class="partnerList_bottom_page">
          <div class="partnerList_bottom_page_left">
            <div
              class="partnerList_bottom_page_left_checkAll"
              @click="handerCheckAll"
            >
              <font class="checkbox" :class="{ check_active: checkAll }"
                ><i class="el-icon-check"></i
              ></font>
            </div>
            全选
            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="partnerList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <modal
      title="设置店铺坐标"
      v-model="visibleCoord"
      :width="650"
      :centered="true"
      :maskClosable="false"
      @ok="handleOkCoord"
      @cancel="handleCancelCoord"
    >
      <div style="padding-left: 10px">
        <p>起始坐标：</p>
        <div class="flex align-center">
          <div class="flex align-center">
            X：<el-input
              style="width: 150px"
              v-model="position_from.x"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
          <div class="flex align-center" style="margin-left: 15px">
            Y：<el-input
              style="width: 150px"
              v-model="position_from.y"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
          <div class="flex align-center" style="margin-left: 15px">
            Z：<el-input
              style="width: 150px"
              v-model="position_from.z"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
        </div>
      </div>
      <div style="padding-left: 10px; margin-top: 20px">
        <p>终点坐标：</p>
        <div class="flex align-center">
          <div class="flex align-center">
            X：<el-input
              style="width: 150px"
              v-model="position_to.x"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
          <div class="flex align-center" style="margin-left: 15px">
            Y：<el-input
              style="width: 150px"
              v-model="position_to.y"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
          <div class="flex align-center" style="margin-left: 15px">
            Z：<el-input
              style="width: 150px"
              v-model="position_to.z"
              type="number"
              placeholder="请输入对应坐标值"
            ></el-input>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
import modal from 'ant-design-vue/lib/modal';
import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
export default {
  components: {
      modal
  },
  data() {
    return {
      user_id: null,
      cateList: [],
      cate: {},
      input: "",
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [], //选中的数据
      tableList: [],
      activeName: "1",
      tagList: [],
      marketList: [], //卖场列表
      marketId: "", //已选卖场id

      visibleCoord: false,
      position_from: {
        //起始坐标
        x: "",
        y: "",
        z: "",
      },
      position_to: {
        //终点坐标
        x: "",
        y: "",
        z: "",
      },
      storeId: null, //需要设置坐标的店铺
    };
  },

  mounted() {
    let user_id = Number(localStorage.getItem("user_id"));
    this.user_id = user_id;
    this.getShopRoom();
    this.remoteMethod();
  },

  methods: {
    // 设置坐标按钮
    SetCoordinate(row) {
      const that = this;
      if (row.position_from) {
        that.position_from = JSON.parse(row.position_from);
      }
      if (row.position_to) {
        that.position_to = JSON.parse(row.position_to);
      }
      that.storeId = row.store_id;
      that.visibleCoord = true;
    },

    // 设置坐标弹出确定
    handleOkCoord() {
      const that = this;
      let params = {
        store_id: that.storeId,
        position_from: JSON.stringify(that.position_from),
        position_to: JSON.stringify(that.position_to),
      };
      that.$http.post('/api/root/Store/setPosition', params).then(res=>{
        if (res.code == 1) {
          that.$message.success("保存成功！");
          that.visibleCoord = false;
          that.handleCancelCoord();
          that.getShopRoom();
        } else {
          that.$message.warning(res.msg);
        }
      })
    },
    // 设置坐标弹出取消
    handleCancelCoord() {
      const that = this;
      that.store_id = null;
      that.position_from = {};
      that.position_to = {};
    },


    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pageSize = 10;
      this.getShopRoom();
    },

    // 选择标签
    selectTag(storeId, cateLst) {
      console.log(storeId, cateLst, "------");
      let arr = [];
      if (cateLst.length) {
        cateLst.map((item) => {
          arr.push(item.cate_id);
        });
      }
      let params = {
        store_id: storeId,
        cate_lst: arr.join(","),
      };
      this.$http.post("/api/root/StoreShop/editTag", params).then((res) => {
        if (res.code == 1) {
          this.$message.success("更改成功");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 获取店铺标签
    getStoreTag() {
      this.$http.post("/api/root/cate/cateOne").then((res) => {
        console.log(res, "商家店铺标签");
        if (res.code == 1) {
          this.tagList = res.data ? res.data : [];
        }
      });
    },

    // 获取商家列表
    getShopRoom() {
      let params = {
        page: this.page,
        pagesize: this.pageSize,
        sale_type: this.activeName, //1家居，2泛家居
        keyword: this.input,
        market_id: this.marketId,
      };
      this.$http.post("/api/root/StoreShop/lst", params).then((res) => {
        console.log(res, "店铺列表");
        if (res.code == 1) {
          this.tableList = res.data.data ? res.data.data : [];
          this.total = res.data.count;
          this.getStoreTag();
        }
      });
    },

    // tab选择
    handleClick(e) {
      this.getShopRoom();
    },

    //新增合作商按钮
    handerNewShop() {
      this.$router.push({ path: "/newPartner" });
    },

    // 类型
    handerChange() {},

    // 搜索
    handerSeach() {
      this.getShopRoom(this.input);
    },

    // 详情
    toDetail(id) {
      this.$router.push({ name: "partnerDetail", query: { id } });
    },

    // 禁用和启用按钮
    shelves(id, entry_status) {
      let is_reco = entry_status == 1 ? 0 : 1;
      this.$http
        .post("/api/root/StoreShop/enable", {
          store_id_lst: id,
          entry_status: is_reco,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getShopRoom();
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "warning",
              message: res.msg,
            });
          }
        });
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].store_id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].store_id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    // // 全选后的删除
    // selectDel(){
    // 	console.log(this.shelvesAlls);
    // 	let res =[...new Set(this.shelvesAlls)]; //去重
    // 	let str = res.join(',');
    // 	if(this.shelvesAlls.length){
    // 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
    // 			confirmButtonText: '确定',
    // 			cancelButtonText: '取消',
    // 			type: 'warning'
    // 		}).then(()=>{
    // 			this.$http.post('/api/root/StoreShop/delete',{store_id_lst:str}).then(res=>{
    // 				console.log(res);
    // 				if(res.code==1){
    // 					this.getShopRoom();
    // 					this.checkAll=false;
    // 					this.checkBoxAll=[];
    // 					this.shelvesAlls=[];
    // 					this.$message({
    // 						type:'success',
    // 						message:'删除成功'
    // 					})
    // 				}
    // 			})
    // 		})
    // 	}else{
    // 		this.$message({
    // 			type:'info',
    // 			message:'请选择要删除的项'
    // 		})
    // 	}
    // },

    // 新增商品按钮
    toNewShop(store_id, market_id) {
      this.$router.push({
        name: "shopDetail",
        query: { store_id, sale_type: this.activeName, market_id },
      });
    },

    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      console.log(val);
      this.getShopRoom();
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(val);
      this.getShopRoom();
    },
  },
};
</script>

<style lang="less" scoped>
@import "partnerList.less";
</style>
